<!-- 文章内容 -->
<template>
    <div class='container post-box' v-if="detailData">
        <div class="row">
            <div class="col-12">
                <img :src="detailData.image && detailData.image.url" alt="" class="rounded-lg img-fluid my-4">
            </div>
            <h2 class="col-12 mb-4">{{ detailData.title }}</h2>
            <!-- author -->
            <div class="col-12 author-info border-top border-bottom py-3 mb-5 align-items-center row g-0">
                <img class="author" :src="author.avatar && author.avatar.url" alt="">
                <div class="info mr-1 ml-1">
                    <h6 class="name">{{ author.nickName }}</h6>
                    <h6 class="label text-muted">{{ author.description }}</h6>
                </div>
                <h6 class="time">发布于：{{detailData.createdAt }}</h6>
            </div>
            
            <!-- 渲染内容 -->
            <div class="col-12" v-html="currentHTML"></div>  
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, computed, ref } from 'vue';
import { PostProps, ImageProps, ResponseType, UserProps, GlobalDataProps } from '../store'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import MarkdownIt from 'markdown-it'
export default defineComponent({
   name: 'postDetail',
   props: {

   },
   components: {

   },

   setup(props) {
       const store = useStore<GlobalDataProps>();
       const route = useRoute();
       const md = new MarkdownIt();
       
       const postId = route.params.id;
       let detailData = ref();
       let author = ref<UserProps>()
       store.dispatch("fetchPostDetail", postId).then(res => {
           detailData.value =  res.data.data;
           author.value = res.data.data.author;
       })

       const currentHTML = computed(() => {
           if( detailData.value ) {
                const { content, isHTML } = detailData.value;
                return isHTML? content: md.render(content)
           } 
           return ''
       })

       return  {
           detailData,
           author,
           currentHTML
       }
   },
})
</script>
<style  scoped>
.post-box {
    max-width: 700px;
}
.author-info {
    display: flex;
    align-items: center;
    
}
.author {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 1px solid #ddd;
}
.info {
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
}
.time {
    width: 240px;
    font-style: italic;
}
</style>